<!-- 股东申请页 -->
<template>
  <view v-if="shenheStatus == 0" class="applyShop">
    <swiper class="swiper" :autoplay="true" v-if="configData">
      <swiper-item v-for="(item, index) in configData.banner" :key="index">
        <image :src="item" class="head"></image>
      </swiper-item>
    </swiper>

    <view class="formBox">
      <view class="formItem">
        <text class="title">{{ $t("shop.withdrawName") }}</text>
        <input
          type="text"
          placeholder-class="input-hold"
          :placeholder="$t('shop.noWithdrawName')"
          v-model="form.name"
        />
      </view>
      <view class="formItem">
        <text class="title">{{ $t("clerk.phone") }}</text>
        <input
          type="text"
          placeholder-class="input-hold"
          :placeholder="$t('mdAdmin.phone')"
          v-model="form.mobile"
          maxlength="11"
        />
      </view>

      <view class="formItem" @click="showAd = true">
        <text class="title">{{ $t("my.region") }}</text>
        <view class="area-info">
          <selectArea
            ref="selectArea"
            v-model="showAd"
            @ok="areaPicker"
            joinKey=" "
            :placeholder="$t('my.chooseRegion')"
          ></selectArea>
          <u-icon size="24" color="#888888" name="arrow-right"></u-icon>
        </view>
      </view>

      <view class="formItem address-form">
        <text class="title">{{ $t("my.detail") }}</text>
        <view class="address-info">
          <view
            class="info-text"
            :class="form.address || address ? 'color-black' : ''"
          >
            <input
              type="text"
              v-model="form.address"
              :placeholder="$t('my.fillDetail')"
            />
          </view>
          <view class="local-box" @click="gotoLocal">
            <i class="iconfont icon-a-map"></i>
            <text>{{ $t("my.positioning") }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="foot">
      <text class="btn" @click="submit">{{ $t("shareholder.apply") }}</text>
      <view class="tip">
        <radio
          :checked="read"
          color="#f0250e"
          @click="read = !read"
          style="transform: scale(0.7)"
        />
        <text>{{ $t("mdAdmin.read") }}</text>
        <text @click="gotoAgreement" style="color: #f0250e"
          >《{{ shareHolderAliasName }}申请协议》</text
        >
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import selectArea from "@/components/tools/tool-area.vue";
export default {
  components: { Shenhe, selectArea },
  data() {
    return {
      classify: [],
      form: {
        name: "",
        mobile: "",
        province: 0,
        city: 0,
        district: 0,
        address: ""
      },
      // 是否阅读协议
      read: true,
      areaInfo: "",
      area: "",
      address: "",
      configData: null,

      showAd: false,
      shareHolderAliasName: ""
    };
  },
  onLoad() {
    this.getTopBanner();

    this.shareHolderAliasName = uni.getStorageSync("shareHolderAliasName");
    uni.setNavigationBarTitle({
      title: (this.shareHolderAliasName || "") + "申请"
    });
  },
  async onShow() {
    let applyRes = await this.$allrequest.shareholder.applyStatus();
    if (!applyRes.code) {
      let data = applyRes.data;

      if (data.is_holder) {
        this.$utils.toUrl("/shareholder/shareholder/index", "redirectTo");
      } else {
        switch (data.is_apply_holder) {
          case 0:
            this.$utils.toUrl(
              "/shareholder/shareholder/conditions",
              "redirectTo"
            );
            break;

          case 2:
            this.$utils.toUrl("/shareholder/shareholder/index", "redirectTo");
            break;
        }
      }
    }
  },
  methods: {
    // 获取配置数据
    getTopBanner() {
      uni.showLoading({
        title: this.$t("home.loading")
      });
      this.$allrequest.shareholder
        .applyConfig()
        .then((res) => {
          uni.hideLoading();
          if (!res.code) {
            if (res.data.banner && res.data.banner != "") {
              res.data.banner = JSON.parse(res.data.banner);
            }
            this.configData = res.data;
          }
        })
        .catch(() => {
          uni.hideLoading();
        });
    },
    // 选择地区
    areaPicker({ province_id, city_id, district_id, position }) {
      this.form.province = province_id;
      this.form.city = city_id;
      this.form.district = district_id;
      this.areaInfo = position;
    },
    // 点击定位
    async gotoLocal() {
      const apiRes = await this.$store.dispatch("getLocation");
      if (apiRes.longitude) {
        uni.chooseLocation({
          success: (res) => {
            if (res.errMsg == "chooseLocation:ok") {
              this.address = res.address;
              this.form.address = res.address;
            }
          }
        });
      }
    },
    // 点击提交
    submit() {
      if (!this.read) {
        uni.showToast({
          title: this.$t("shareholder.noRead"),
          icon: "none"
        });
        return;
      }
      if (!this.form.name) {
        uni.showToast({
          title: this.$t("shareholder.noName"),
          icon: "none"
        });
        return;
      }
      if (!this.form.mobile) {
        uni.showToast({
          title: this.$t("admin.noPhone"),
          icon: "none"
        });
        return;
      } else {
        if (!this.$utils.isMobile(this.form.mobile)) {
          uni.showToast({
            title: this.$t("admin.errPhone"),
            icon: "none"
          });
          return;
        }
      }
      if (!this.form.province) {
        uni.showToast({
          title: this.$t("my.chooseRegion"),
          icon: "none"
        });
        return;
      }
      if (!this.form.address) {
        uni.showToast({
          title: this.$t("shop.detailAddress"),
          icon: "none"
        });
        return;
      }
      this.$allrequest.shareholder
        .apply(this.form)
        .then((res) => {
          if (!res.code) {
            uni.showToast({
              title: this.$t("mdAdmin.submitSuc")
            });
            setTimeout(() => {
              this.$utils.toUrl(
                `/shareholder/apply/apply-result`,
                "redirectTo"
              );
            }, 1500);
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none"
            });
          }
        })
        .catch((err) => {
          uni.showToast({
            title: err.msg,
            icon: "none"
          });
        });
    },
    // 跳转协议页面
    gotoAgreement() {
      uni.setStorageSync("richText", this.configData.agreement);
      this.$utils.toUrl(
        "/md_admin/apply-md/richText?title=" +
          this.$t("shareholder.applyAgreement")
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.applyShop {
  min-height: 100vh;
  background-color: #f2f2f2;
  font-family: PingFang SC;
  color: #262626;
  padding-bottom: calc(constant(safe-area-inset-bottom));
  padding-bottom: calc(env(safe-area-inset-bottom));
  .swiper {
    width: 100%;
    height: 360rpx;
    display: block;
  }
  .head {
    width: 100%;
    height: 360rpx;
    display: block;
  }
  .formBox {
    padding-left: 30rpx;
    background-color: #fff;
    margin-bottom: 282rpx;
    .formItem {
      padding: 30rpx 0;
      display: flex;
      align-items: center;
      padding-right: 30rpx;
      justify-content: space-between;
      border-bottom: 1px solid #f1f1f1;
      .title {
        width: 160rpx;
        font-size: 30rpx;
        text-align: left;
      }
      input {
        flex: 1;
        text-align: left;
      }
      .input-hold {
        color: #8c8c8c;
      }
      .chooseClass {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #8c8c8c;
        .iconfont {
          font-size: 24rpx;
        }
      }
      .area-info {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
        .color-black {
          color: rgb(38, 38, 38);
        }
      }
      .address-info {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .info-text {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
        .color-black {
          color: rgb(38, 38, 38);
        }
        .local-box {
          display: flex;
          justify-content: center;
          align-items: center;
          .iconfont {
            color: #8c8c8c;
          }
          text {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #8c8c8c;
          }
        }
      }
    }
    .address-form {
      display: flex;
      align-items: flex-start;
      .info-text {
        width: 80%;
      }
    }
    .choosePic {
      padding: 30rpx 0;
      .title {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        color: #1d1d1d;
        text:nth-child(2) {
          color: #8c8c8c;
        }
      }
      .choose {
        position: relative;
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
        background-color: #f6f6f6;
        margin-top: 30rpx;
        margin-right: 16rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        color: #8c8c8c;
        .iconfont {
          font-size: 60rpx;
        }
        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
        .close {
          position: absolute;
          width: 32rpx;
          height: 32rpx;
          right: -16rpx;
          top: -16rpx;
          background-color: #f0250e;
          color: #fff;
          font-size: 28rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  .foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 111;
    background: #ffffff;
    width: 100%;
    padding-top: 20rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom));
    padding-bottom: calc(env(safe-area-inset-bottom));
    border-top: 1px solid #eee;
    .btn {
      width: 678rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      background-color: #f0250e;
      font-size: 32rpx;
      color: #fff;
      font-weight: 500;
      border-radius: 999rpx;
    }
    .tip {
      margin: 20rpx 0;
      font-size: 24rpx;
      color: #8c8c8c;
    }
  }
}
</style>
